<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习统计 - 乐考无忧</title>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/bootstrap-icons.css">
    <style>
        body {
            background-color: #f5f5f5;
            padding-bottom: 20px;
        }
        .header {
            background: linear-gradient(135deg, #00b8a9, #00a19a);
            color: white;
            padding: 15px;
            position: relative;
        }
        .back-button {
            color: white;
            text-decoration: none;
            font-size: 1.2rem;
        }
        .stats-card {
            background: white;
            border-radius: 15px;
            margin: 15px;
            padding: 20px;
        }
        .stats-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .time-selector {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        .time-btn {
            padding: 6px 12px;
            border-radius: 20px;
            border: 1px solid #eee;
            background: white;
            color: #666;
            font-size: 0.9rem;
        }
        .time-btn.active {
            background: #00b8a9;
            color: white;
            border-color: #00b8a9;
        }
        .progress-item {
            margin-bottom: 20px;
        }
        .progress-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        .progress-label {
            color: #666;
            font-size: 0.9rem;
        }
        .progress-value {
            color: #00b8a9;
            font-weight: bold;
        }
        .progress {
            height: 8px;
            border-radius: 4px;
        }
        .chart-container {
            height: 200px;
            margin: 20px 0;
        }
        .achievement-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
        .achievement-item {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 15px;
            text-align: center;
        }
        .achievement-icon {
            width: 40px;
            height: 40px;
            border-radius: 20px;
            background: rgba(0,184,169,0.1);
            color: #00b8a9;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 10px;
            font-size: 1.2rem;
        }
        .achievement-value {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .achievement-label {
            font-size: 0.8rem;
            color: #666;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="header d-flex align-items-center">
        <a href="profile.html" class="back-button me-3">
            <i class="bi bi-arrow-left"></i>
        </a>
        <h5 class="mb-0">学习统计</h5>
    </div>

    <!-- 时间范围选择 -->
    <div class="stats-card">
        <div class="time-selector">
            <button class="time-btn">周</button>
            <button class="time-btn active">月</button>
            <button class="time-btn">年</button>
        </div>

        <!-- 学习时长统计 -->
        <div class="progress-item">
            <div class="progress-header">
                <span class="progress-label">总学习时长</span>
                <span class="progress-value">126小时</span>
            </div>
            <div class="progress">
                <div class="progress-bar bg-success" style="width: 75%"></div>
            </div>
        </div>

        <!-- 完成题目统计 -->
        <div class="progress-item">
            <div class="progress-header">
                <span class="progress-label">完成题目</span>
                <span class="progress-value">463题</span>
            </div>
            <div class="progress">
                <div class="progress-bar bg-info" style="width: 85%"></div>
            </div>
        </div>

        <!-- 知识点掌握统计 -->
        <div class="progress-item">
            <div class="progress-header">
                <span class="progress-label">知识点掌握</span>
                <span class="progress-value">78%</span>
            </div>
            <div class="progress">
                <div class="progress-bar bg-warning" style="width: 78%"></div>
            </div>
        </div>
    </div>

    <!-- 成就统计 -->
    <div class="stats-card">
        <h6 class="mb-4">学习成就</h6>
        <div class="achievement-list">
            <div class="achievement-item">
                <div class="achievement-icon">
                    <i class="bi bi-calendar-check"></i>
                </div>
                <div class="achievement-value">42天</div>
                <div class="achievement-label">连续打卡</div>
            </div>
            <div class="achievement-item">
                <div class="achievement-icon">
                    <i class="bi bi-star"></i>
                </div>
                <div class="achievement-value">2460</div>
                <div class="achievement-label">累计积分</div>
            </div>
            <div class="achievement-item">
                <div class="achievement-icon">
                    <i class="bi bi-trophy"></i>
                </div>
                <div class="achievement-value">16个</div>
                <div class="achievement-label">获得勋章</div>
            </div>
            <div class="achievement-item">
                <div class="achievement-icon">
                    <i class="bi bi-graph-up"></i>
                </div>
                <div class="achievement-value">Top 5%</div>
                <div class="achievement-label">超越用户</div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html> 